<template>
    <div id="workcategory">
        <top-tabbar title="业务类别"/>
        <!--border边框背景-->
        <div class="workcategroy_bg_border_box">
            <img class="workcategroy_bg_border" src="~assets/img/workcategory/workcategroy_bg_border.png" alt="">
        </div>

        <div class="chart_box">
            <div class="chart_box_item">
                <yw-statistics title="业务报修"></yw-statistics>
                <sb-statistics class="sb_statistics" title="报修类别"></sb-statistics>
            </div>

            <div class="chart_box_item">
                <mid-content></mid-content>
                <mid-bottom></mid-bottom>
            </div>

            <div class="chart_box_item">
                <ywwt-ring title='所有工单'></ywwt-ring>
                <wywt-statistics title='报修工单'></wywt-statistics>
                <tsbt-statistics title="停水公告"></tsbt-statistics>
            </div>
        </div>

    </div>
</template>

<script>
    // all
    import topTabbar from 'components/common/topTabbar/topTabbar'
    import heightChart from 'components/content/heightChart/heightChart'
    import lowChart from 'components/content/lowChart/lowChart'
    //left
    import ywStatistics from 'views/workcategory/ywStatistics/ywStatistics'
    import sbStatistics from 'views/workcategory/sbStatistics/sbStatistics'
    import ywwtRing from 'views/workcategory/ywwtRing/ywwtRing'
    // right
    import tsbtStatistics from 'views/workcategory/tsbtStatistics/tsbtStatistics'
    import wywtStatistics from 'views/workcategory/wywtStatistics/wywtStatistics'

    // mid
    import midBottom from 'views/workcategory/midBottom/midBottom'
    import midContent from 'views/workcategory/midContent/midContent'

    export default {
        name: "workcategory",
        components: {
            topTabbar,
            heightChart,
            lowChart,

            ywStatistics, //业务问题统计
            sbStatistics, //业务设备统计
            ywwtRing,   //专业问题统计
            tsbtStatistics,  //套室表图统计
            wywtStatistics,   //物业问题统计
            midBottom,
            midContent
        },

    }
</script>

<style scoped>
    #workcategory {
        width: 100%;
        height: 1080px;
        background: url("../../assets/img/workcategory/workcategory_bg.png");
        background-size: 100%;
        overflow: hidden;
    }

    .workcategroy_bg_border_box {
        position: absolute;
        top: 20px;
        right: 20px;
        left: 20px;
        bottom: 20px;
    }

    .workcategroy_bg_border_box img {
        width: 100%;
        height: 100%;
    }

    .chart_box {
        /*border: 1px solid red;*/
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 0 60px;
    }

    .chart_box_item {
        padding-top: 20px;
        width: 609px;
        /*height: 100%;*/
        align-items: stretch;
    }

    .left_top_height {
        margin-bottom: 50px;
    }

    .low_top_bottom {
        margin: 15px 0;
    }

    .sb_statistics {
        margin-top: 45px;
    }
</style>
